$(function() {


            $("#load").click(function() {
            	loadData();
            })

            function loadData() {
                $.ajax({
                        type: "GET",
                        url: "http://localhost:3000/users",
                        dataType: "json"
                    })
                    .done(function(msg) {
                        console.log(msg);
                        tableOperator(msg);
                    })
            }

            function tableOperator(data) {
            	$("#users").empty();
                data.forEach((item, index) => {
                    $("<tr></tr>").appendTo("table");
                    $("<td>" + item.id + "</td>").appendTo("table tr:last");
                    $("<td>" + item.name + "</td>").appendTo("table tr:last");
                    $("<td>" + item.age + "</td>").appendTo("table tr:last");
                    $("<td><button>delete</button></td>").appendTo("table tr:last").click(function() {
                       deleteData(item.id);
                    });
                })
            }

            function deleteData(id){
            	  $.ajax({
                        type: "DELETE",
                        url: "http://localhost:3000/users/"+id+"/",
                    })
                    .done(function(msg) {
                        console.log("delete"+msg);
                        loadData();
                    });
            }
        })